<template>
	<view class="search-container">
		<view class="search-box">
			<u-search height="80" v-model="keyword" placeholder="花木成畦手自栽" @change="$u.debounce(input, 1000)"
				:focus="true" :show-action="true" action-text="搜索" :animation="true"></u-search>
		</view>
		<view v-if="is_histroy" class="label-box">
			<view class="label-header">
				<text class="label-title">搜索历史</text>
				<text class="label-clear" @click="clear">清空</text>
			</view>

			<!-- <u-gap height="30" bg-color="#bbb"></u-gap> -->

			<view v-if="historyList.length > 0" class="label-content">
				<view class="label-content__item" v-for="(item,index) in historyList" @click="openHistory(item.name)" :key="index">{{item.name}}</view>
			</view>
			<u-empty margin-top="50" v-else text="没有搜索历史" mode="search"></u-empty>
		</view>
		<template v-else>
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<product-card :data="searchResults" @onProductsItemTap="onProductsItemTap"></product-card>
			<u-loadmore v-if="searchResults.length >= 1" :status="status" :load-text="loadText" />
		</template>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				// 搜索结果列表
				searchResults: [],
				keyword: '',
				is_histroy: true,
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的!'
				}
				// historyList: [],
			};
		},
		methods: {
			...mapActions('m_search', ['set_history','clear_history']),
			async input() {
				// console.log(this.keyword);
				// if (this.keyword == '') {
				// 	return
				// }
				const keywordTrim = this.keyword
				const keyword = function trim(str) { //删除左右两端的空格
					return str.replace(/(^\s*)|(\s*$)/g, "");
				}
				const resultName = keyword(keywordTrim)
				if (!resultName) {
					this.is_histroy = true
					return
				}				

				const search = await uniCloud.callFunction({   
					name: 'getSearch',
					data: {
						name: resultName
					}
				})
				if (search) {
					this.searchResults = search.result.data
					this.is_histroy = false
					this.status = 'nomore'
					this.set_history({
						name: resultName
					})
				}
			},
			// 根据搜索关键词，搜索商品建议列表
			getSearchList(event) {
				// 判断关键词是否为空
				console.log(event);
			},
			onProductsItemTap(id) {
				uni.navigateTo({
					url: "/page_roduct_detail/product/product?id=" + id
				})
			},
			// 存搜索词
			setHistory(name) {
				console.log(name);
				this.setHistory({name})
			},
			openHistory(name) {
				console.log(name);
				this.keyword = name
			},
			clear() {
				this.clear_history()
				uni.showToast({
					title:'清空完毕!',
					duration:1500,
					icon:"success"
				})
			}
		},
		computed: {
			...mapState('m_search', ['historyList'])
		},
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
	}

	.search-container {
		height: 100%;
		// background-color: #bbb;
	}

	.search-box {
		height: 100rpx;
		background-color: #AD956B;
		// position: sticky;
		// top: 0;
		// z-index: 999;
		display: flex;
		// justify-content: center;
		// align-items: center;
		flex-direction: column;

		.u-search {
			flex-grow: 1;
			padding: 0 30rpx 0 30rpx;
		}
	}

	.label-box {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 30rpx;
		border-bottom: 1px #f5f5f5 solid;
		// height: 100%;

		.label-header {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			&:after {
				content: '';
				padding: 0;
				width: 750rpx;
				border-bottom: 3rpx #bbb solid;
			}

			.label-title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: red;
			}

			.label-clear {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #30b33a;
				font-weight: bold;
			}
		}


	}

	.label-content {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		padding-top: 0;

		.label-content__item {
			padding: 8rpx 30rpx;
			margin-top: 24rpx;
			margin-right: 20rpx;
			-webkit-border-radius: 10rpx;
			-moz-border-radius: 10rpx;
			border-radius: 10rpx;
			border: 2rpx #666 solid;
			font-size: 28rpx;
			color: #666;
		}
	}
</style>
